$(function () {
    map();
    // 在map函数开头添加
    document.getElementById('map').style.display = 'block';
    function map() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('map'));

        // 湖州市学校数据
        var schoolData = [
            { name: '湖州中学', value: 90 },
            { name: '湖州二中', value: 85 },
            { name: '吴兴高级中学', value: 80 },
            { name: '湖州五中', value: 75 },
            { name: '湖州四中', value: 70 },
            { name: '湖州一中', value: 65 },
            { name: '湖州新世纪外国语学校', value: 60 },
            { name: '湖州师范学院附属中学', value: 55 },
            { name: '湖州市爱山小学', value: 50 },
            { name: '湖州市飞英小学', value: 45 },
            { name: '湖州市月河小学', value: 40 },
            { name: '湖州市东风小学', value: 35 },
            { name: '湖州市凤凰小学', value: 30 },
            { name: '湖州市织里实验小学', value: 25 },
            { name: '湖州市南浔实验小学', value: 20 },
            { name: '湖州师范学院', value: 120 },
            { name: '湖州职业技术学院', value: 110 }
        ];

        // 湖州市学校坐标
        var schoolCoordMap = {
            '湖州中学': [120.10, 30.90],
            '湖州二中': [120.08, 30.88],
            '吴兴高级中学': [120.12, 30.86],
            '湖州五中': [120.09, 30.92],
            '湖州四中': [120.07, 30.94],
            '湖州一中': [120.05, 30.96],
            '湖州新世纪外国语学校': [120.11, 30.93],
            '湖州师范学院附属中学': [120.13, 30.95],
            '湖州市爱山小学': [120.06, 30.87],
            '湖州市飞英小学': [120.09, 30.89],
            '湖州市月河小学': [120.07, 30.91],
            '湖州市东风小学': [120.10, 30.94],
            '湖州市凤凰小学': [120.12, 30.97],
            '湖州市织里实验小学': [120.25, 30.85],
            '湖州市南浔实验小学': [120.42, 30.88],
            '湖州师范学院': [120.125, 30.87],
            '湖州职业技术学院': [120.13, 30.87]
        };

        var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var geoCoord = schoolCoordMap[data[i].name];
                if (geoCoord) {
                    res.push({
                        name: data[i].name,
                        value: geoCoord.concat(data[i].value)
                    });
                }
            }
            return res;
        };

        // 注册湖州地图
        $.get('https://geo.datav.aliyun.com/areas_v3/bound/330500_full.json', function (huzhouJson) {
            echarts.registerMap('huzhou', huzhouJson);

            option = {
                title: {
                    text: '湖州市吴兴区校园食堂菌落检测仪分布',
                    left: 'center',
                    top: '20',
                    textStyle: {
                        color: 'rgba(31, 249, 220, 0.61)',
                        fontSize: 18
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        return params.name + '<br/>设备数量: ' + params.value[2];
                    }
                },
                geo: {
                    map: 'huzhou',
                    label: {
                        show: true,
                        color: '#333',
                        fontSize: 10
                    },
                    roam: true,
                    zoom: 2.5,
                    // minZoom:1.0,
                    // maxZoom:8.5,
                    scaleLimit: {
                        min: 1.0,
                        max: 11.5
                    },
                    itemStyle: {
                        normal: {
                            areaColor: 'rgba(2,37,101,.3)',
                            borderColor: 'rgba(112,187,252,.8)',
                            borderWidth: 1
                        },
                        emphasis: {
                            areaColor: 'rgba(2,37,101,.8)'
                        }
                    }
                },
                series: [
                    {
                        name: '学校分布',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        data: convertData(schoolData),
                        symbolSize: function (val) {
                            return Math.sqrt(val[2]) * 3; // 根据设备数量调整点的大小
                        },
                        label: {
                            normal: {
                                show: true,
                                formatter: '{b}',
                                position: 'right',
                                color: 'red',
                                fontSize: 14
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#ff6600',
                                shadowBlur: 10,
                                shadowColor: '#ff6600'
                            }
                        }
                    },
                    {
                        name: '设备数量',
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        data: convertData(schoolData.sort(function (a, b) {
                            return b.value - a.value;
                        }).slice(0, 5)), // 只显示前5个设备数量最多的学校
                        symbolSize: function (val) {
                            return Math.sqrt(val[2]) * 4;
                        },
                        showEffectOn: 'render',
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        hoverAnimation: true,
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'right',
                                show: true,
                                color: 'orange',
                                fontSize: 12,
                                backgroundColor: 'rgba(0,0,0,0.7)',
                                padding: [3, 5],
                                borderRadius: 3
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#ffeb7b',
                                shadowBlur: 10,
                                shadowColor: '#ffeb7b'
                            }
                        },
                        zlevel: 1
                    }
                ]
            };

            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        });
    }
});